<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>百度地图测试</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--<script src="../libs/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../libs/mui/mui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../libs/mui/mui.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
			<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
			<h1 class="mui-title">div模式下拉菜单</h1>
			<style type="text/css">
				#mapcon {
					width: 100%;
					position: fixed;
					top: 41px;
					line-height: 400px;
					text-align: center;
					background: #FFFFFF;
				}
			</style>
		</header>
		<div class="mui-content" style="margin: 44px 0;">
			<div id="mapcon">地图加载中...</div>
			<div style="margin-top:400px;position: fixed;">
				<button id="di3" type="button" class="mui-btn mui-btn-royal">调用导航</button>
			</div>
		</div>
	</body>
	<script>
		mui.init();
		mui.plusReady(function() {
			//地图初始化
			var ptObj = new plus.maps.Point(113.83715600, 22.74511000);
			map = new plus.maps.Map("mapcon", {
				center: ptObj,
				zoom: 20,
				traffic: true
			});
			map.showUserLocation(true); //开启用户位置
			//var routeObj = new plus.maps.Route( new plus.maps.Point(113.83715600,22.74511000), new plus.maps.Point(113.83715600,22.94511000) );
			//地址转换坐标
			plus.maps.Map.geocode("卓越时代大厦", {
					city: "深圳"
				}, function(event) {
					var address = event.address;
					var point = event.coord;
					var coordType = event.coordType;
					//alert("Coord:"+JSON.stringify(point));
					//alert(coordType);
				}, function(e) {
					//alert("Failed:"+JSON.stringify(e));
				})
				//坐标转换地址
			var point = new plus.maps.Point(113.83715600, 22.74511000);
			plus.maps.Map.reverseGeocode(point, {}, function(event) {
				var address = event.address; // 转换后的地理位置
				var point = event.coord; // 转换后的坐标信息
				var coordType = event.coordType; // 转换后的坐标系类型
				//alert("Address:" + address);
			}, function(e) {
				//alert("Failed:" + JSON.stringify(e));
			});
			//覆盖物
			marker = new plus.maps.Marker(new plus.maps.Point(113.83715600, 22.74511000));
			marker.setIcon("../doc/a.jpg");
			marker.setLabel("HBuilder");
			var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
			marker.setBubble(bubble);
			map.addOverlay(marker);
			
			//marker.hide();
			//调用第三方地图
			document.getElementById("di3").addEventListener('tap', function() {
				//获取当前坐标
				var geo = {};
				plus.geolocation.getCurrentPosition(function(p) {
					alert("Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude);
					geo.lat = p.coords.latitude;
					geo.lon = p.coords.latitude;
				}, function(e) {
					alert("Geolocation error: " + e.message);
				});
				// 设置目标位置坐标点和其实位置坐标点
				var dst = new plus.maps.Point(115.92264500, 28.681054000); // 天安门 
				var src = new plus.maps.Point(geo.lon, geo.lat); // 大钟寺
				// 调用系统地图显示 
				plus.maps.openSysMap(dst, "南昌", src);
			})
		})
		
		/**
		 * 5+定位替换浏览器定位，务必保证此JS在调用定位之前执行 
		 */
		(function(){
			var plusReady = function(callback){
				if (window.plus) {
					setTimeout(function() {
						callback();
					}, 0);
				} else {
					document.addEventListener("plusready", function() {
						callback();
					}, false);
				}
			}
		
			if (navigator.userAgent.match(/Html5Plus/i)) {
				navigator.geolocation.clearWatch = function(watchId) {
					plusReady(function() {
						plus.geolocation.clearWatch(watchId);
					});
				};
				navigator.geolocation.getCurrentPosition = function(successCB, errorCB, option) {
					plusReady(function() {
						plus.geolocation.getCurrentPosition(successCB, function(error) {
							(errorCallback && errorCallback(error, errorCB)) || (errorCB && errorCB(error));
						}, option);
					});
				};
				navigator.geolocation.watchPosition = function(successCB, errorCB, option) {
					plusReady(function() {
						plus.geolocation.watchPosition(successCB, errorCB, option);
					});
				};
			}
		})();
	</script>

</html>